<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/video.css" />
    <link rel="stylesheet" type="text/css" href="css/animation.css" />
    <link rel="stylesheet" type="text/css" href="css/login.css" />
    <title>视频</title>



</head>
<style>

</style>



<body>
    <div class="web">
            <header>
                <section><img src="images/logo_03.jpg"></section>
                <section><img src="images/logo.jpg"></section>
                <nav class="btn_nav">
                    <span></span>
                    <span></span>
                    <span></span>
                </nav>
                <ul class="nav">
                        <li><a href="index.html">首页</a></li>
                        <li class="border_san"><a href="video.html">视频</a></li>
                        <li><a href="fun.html">功能</a></li>
                        <li><a href="consult.html">咨询</a></li>
                        <li><a href="actor.html">名伶</a></li>
                        <li class="toggle_btn">登录</li>
                </ul>
            </header>
            <section class="banner">
                    <img src="images/v_banner_03.jpg">
                    <article class="banner_content">
                                <h1>你看到过华装丽服下他们的用心，泪水和汗水吗</h1>
                                <p>请认真欣赏他们为一台戏所准备的一切，给他们一点时间让你感受粤剧文化</p>
                                <a href="#maodian">了解他们</a>
                    </article>
            </section>
            <div class="title_bg">
                    <img src="images/biaoti.png">
                    <h1 id="maodian">粤韵<span>风华</span></h1>       
                </div>
            <article class="video_content">
                    <section>
                          <article>
                                <div class="left">
                                    <div class="zimuimg"><img src="images/A.png"></div>
                                    <h3>红烛泪</h3>
                                    <p>曲：王粤生</p>
                                    <p>词：唐涤生</p>
                                    <span class="img_scale">点击观看</span>
                                </div>
                                <aside class="right">
                                    <img class="v_img" src="images/v1_03.jpg">
                                </aside>
                          </article>
                          <p>一九九七年，七月二十三</p>
                    </section>
                    <section>
                            <article>
                                  <div class="left">
                                        <div class="zimuimg"><img src="images/B.png"></div>
                                      <h3>荔枝颂</h3>
                                      <p>曲：陈冠卿</p>
                                      <p>词：陈冠卿</p>
                                      <span class="img_scale">点击观看</span>
                                  </div>
                                  <aside class="right">
                                      <img class="v_img" src="images/v2_05.jpg">
                                  </aside>
                            </article>
                            <p>一九五七年，二月十六</p>
                      </section>
                      <section>
                            <article>
                                  <div class="left">
                                    <div class="zimuimg"><img src="images/c.png"></div>
                                      <h3>分飞燕</h3>
                                      <p>作曲：丘鹤寿</p>
                                      <p>词：苏翁</p>
                                      <span class="img_scale">点击观看</span>
                                  </div>
                                  <aside class="right">
                                      <img class="v_img" src="images/v3_09.jpg">
                                  </aside>
                            </article>
                            <p>一九三四年，五月三日</p>
                      </section>
                      <section>
                            <article>
                                  <div class="left">
                                      <div class="zimuimg"><img src="images/D.png"></div>
                                      <h3>帝女花</h3>
                                      <p>曲：唐涤生</p>
                                      <p>词：唐涤生</p>
                                      <span class="img_scale">点击观看</span>
                                  </div>
                                  <aside class="right">
                                      <img class="v_img" src="images/v4_10.jpg">
                                  </aside>
                            </article>
                            <p>一九五七年，五月十三</p>
                      </section>
                      <section>
                            <article>
                                  <div class="left">
                                      <div class="zimuimg"><img src="images/E.png"></div>
                                      <h3>牡丹亭·惊梦</h3>
                                      <p>曲：汤显祖</p>
                                      <p>词：白先勇</p>
                                      <span class="img_scale">点击观看</span>
                                  </div>
                                  <aside class="right">
                                      <img class="v_img" src="images/v5_07.jpg">
                                  </aside>
                            </article>
                            <p>一九五七年，五月十三</p>
                      </section>
                      <section>
                            <article>
                                  <div class="left">
                                      <div class="zimuimg"><img src="images/F.png"></div>
                                      <h3>蝶影红梨记</h3>
                                      <p>曲：唐涤生</p>
                                      <p>词：唐涤生</p>
                                      <span class="img_scale">点击观看</span>
                                  </div>
                                  <aside class="right">
                                      <img class="v_img" src="images/v6_07.jpg">
                                  </aside>
                            </article>
                            <p>一九五七年，五月十三</p>
                      </section>
            </article>
            <div><span class="clickBtn">展开更多</span></div>
           <footer>
                <img src="images/footer_02.jpg">
                <aside>
                    <p>意见反馈 & 让我们变得更好</p>
                    <input type="text">
                    <span>sumbit</span> 
                </aside> 
           </footer>
    </div>
    <!--回到顶部-->
    <div class="go_Top">
            回<br>到<br>顶<br>部
    </div>
    <!--登录-->
    <div class="login">
            <article>
                    <section class="login_left">
                            <img src="images/dl_03.jpg">
                    </section>
                     <form class="login_right login_box">
                            <h3>登录</h3>
                            <input type="text" placeholder="请输入用户名/手机号" required>
                            <input type="password" placeholder="请输入密码" required minlength="8" maxlength="15" required/><br>
                            <input type="submit" value="确认登录">
                            <p>还没注册？去<span class="reg_btn">注册</span></p>
                    </form> 
                    <form class="login_right register">
                        <h3>注册</h3>
                        <input type="text" placeholder="请输入手机号注册" required>
                        <input  placeholder="请输入密码"  type="password" minlength="8" maxlength="15" required/><br>
                        <input  placeholder="请确认密码"  type="password" minlength="8" maxlength="15" required/><br>
                        <input type="submit" value="确认注册">
                        <p>注册完成？去<span class="login_btn">登录</span></p>
                </form>
            </article>
            <span class="back">返回</span>
    </div>
    <div class="zz">
        <div class="video_box">
            <video controls>
                    
                    <source src="movie.mp4"  type="video/mp4">
                    <source src="movie.ogg"  type="video/ogg">
                    您的浏览器不支持 HTML5 video 标签。
            </video>
            <span class="x_close">×</span>
        </div> 
    </div>  

</body>
<script src="js/response.js"></script>
<script src="js/logres.js"></script>
<script src="js/nav.js"></script>
<script src="js/videoxr.js"></script>
<script src="js/gotop.js"></script>
<script>
clickMov();



</script>

</html>